<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="1300" height="600"></canvas>
		<script type="text/javascript">
		var canvas = document.getElementById("mycanvas");
	    var ctx =canvas=canvas.getContext("2d");
	    var arcArr=[
//	    [20,100,20,5,0,"blue"],
//	    [20,100,20,10,0,"white"],
//	    [20,100,20,10,5,"black"]
	    ]
	    setInterval(function(){
  	    	for(var i = 0;i<30;i++){
	    		var vx = Math.random()*5+1;
	    		if(Math.random()>0.5){
	    			vx=-vx
     		  }
	    	
	    	var vy = Math.random()*15+10;
	    	var r = parseInt(Math.random()*256);
	    	var g = parseInt(Math.random()*256);
	    	var b = parseInt(Math.random()*256);
	    	arcArr.push([600,500,10,vx,-vy,"rgb("+r+","+g+","+b+")"])
	    	}    
	    },3000)
	    
	    setInterval(function(){
	    	ctx.fillStyle="rgba(255,254,0,0.3)";
	    	ctx.fillRect(0,0,1300,600);
	    for(var i=0; i< arcArr.length;i++){
	    	ctx.beginPath();
	    	ctx.fillStyle=arcArr[i][5];
	    	
	    	ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
	    	ctx.fill();
	    	arcArr[i][0] =arcArr[i][0]+arcArr[i][3];
	    	arcArr[i][1] =arcArr[i][1]+arcArr[i][4];
	    	arcArr[i][2] =arcArr[i][2] -Math.random()*0.1;
	    	arcArr[i][4] =arcArr[i][4] +0.5;
	    	
	    	
	    	if(arcArr[i][2] < Math.random()*5)
	    	{
	    		arcArr.splice(i,1);
	    	}
	    	
	    	if(arcArr[i][1]>600-arcArr[i][2]){
	    		arcArr[i][4]=-arcArr[i][4];
	    		arcArr[i][4]=arcArr[i][4]*0.3;
	    		arcArr[i][1]=600-arcArr[i][2];
	    	}
	    	
//	    	if(arcArr[i][0]>1300-arcArr[i][2]){
//	    		arcArr[i][3]=-arcArr[i][3];
//	    		arcArr[i][0]=1300-arcArr[i][2];
//	    	}
//	    	
//	    	if(arcArr[i][0]<arcArr[i][2]){
//	    		arcArr[i][3]=-arcArr[i][3];
//	    		arcArr[i][0]=arcArr[i][2];
//	    	}
	    }
	    	
	    },16)
	    
		</script>
	</body>
</html>
